<template>
    <el-dialog v-model="dialogFormVisible" @close="handleClose" :close-on-click-modal="false" :title="title" width="960px">
        <el-form 
            v-loading="editLoading" 
            ref="formRef" 
            label-width="100px"
            :model="form" 
            style="padding: 30px" 
            :rules="rules"
        >
          <el-form-item label="消息类型：" required prop="stype">
            <el-radio-group v-model="form.stype">
              <el-radio :label="1">系统</el-radio>
              <el-radio :label="2">课程</el-radio>
            </el-radio-group>
          </el-form-item>
            <el-form-item label="消息名称" required prop="title">
                <el-input v-model="form.title" autocomplete="off" maxlength="200" placeholder="名称" />
            </el-form-item>
            <el-form-item label="消息内容" required prop="msg">
                <el-input v-model="form.msg" autocomplete="off" rows="15" maxlength="1000" placeholder="名称" type="textarea"/>
            </el-form-item>
            <el-form-item label="启用状态：" required prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="dialog-footer" style="text-align: center">
                <el-button @click="handleClose" icon="remove">取消</el-button>
                <el-button type="primary" :loading="suLoading" @click="handleSubmit" icon="plus">{{ form.id?'更新':'保存' }}</el-button>
            </div>
        </el-form>
    </el-dialog>
</template>
<script setup>
import {getById, saveUpdate} from '@/api/msg/index.js'
import KVA from '@/utils/kva.js'
import debounce from '@/utils/debounce'

const emits = defineEmits(["load"])
// 控制弹窗得显示
const dialogFormVisible = ref(false)
// 这个数据模型
let form = ref({
    title: "",
    msg: "",
    stype: 1,
    status: 1,
})

// 弹出标题
const title = ref("添加")
const editLoading = ref(false)
const suLoading = ref(false)
// 表单ref, 用于提交最终得验证处理
const formRef = ref({})
// 表单验证
const rules = reactive({
    "roleName": [{ required: true, message: '请输入消息名称', trigger: 'blur' }],
    "roleCode": [{ required: true, message: '请输入消息代号', trigger: 'blur' }],
})

// 打开修改密码的弹窗
const handleOpen = async (opid) => {
    // 每次打开头重置
    dialogFormVisible.value = true;
    title.value = "添加"
    if (opid) {
        title.value = "编辑"
        editLoading.value = true;
        const resp = await getById(opid)
        editLoading.value = false;
        form.value = resp.data
        title.value = "编辑【" + form.value.title + "】"
    }
}

// 保存和修改
const handleSubmit = () => {
  suLoading.value = true
  debounce(()=>{
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        try{
          await saveUpdate(form.value)
          suLoading.value = false
          // 提示保存成功
          KVA.notifySuccess(form.value.id?"更新成功":"保存成功")
          // 关闭弹窗
          handleClose()
          // 刷新方法
          emits("load")
        }catch(ex){
          suLoading.value = false
        }
      }else{
        suLoading.value = false
      }
    })
  },600)
}

const handleClose = () => {
    formRef.value.resetFields()
    suLoading.value = false
    editLoading.value = false
    dialogFormVisible.value = false
}


// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
    handleOpen
})
</script>